<template>
  <div>
    <el-container class="layout-container-demo">
      <el-aside width="220px" class="sidebar">
        <div class="work-center-title">工作中心</div> <!-- 添加固定样式文字 -->
        <el-scrollbar >
          <el-menu :default-active="undialogVisible ? '/shopReport':'/shopTest'" :default-openeds="['6']" class="custom-menu" :router="true">
            <el-sub-menu  v-if="undialogVisible" index="1">
              <template #title>
                <el-icon>
                  <message />
                </el-icon>订单中心
              </template>
              <el-menu-item index="/shopWaitPay" to="/shopWaitPay">待付款订单</el-menu-item>
              <el-menu-item index="/shopWaitUse" to="/shopWaitUse">待使用订单</el-menu-item>
              <el-menu-item index="/shopInuse" to="/shopInuse">进行中订单</el-menu-item>
              <el-menu-item index="/shopWaitComment" to="/shopWaitComment">待评价订单</el-menu-item>
              <el-menu-item index="/shopOrderBingo" to="/shopOrderBingo">已完成订单</el-menu-item>
            </el-sub-menu>

            <el-sub-menu v-if="undialogVisible" index="2">
              <template #title>
                <el-icon><Notebook /></el-icon>服务管理
              </template>
              <el-menu-item index="/shopServiceManager">服务信息维护</el-menu-item>
            </el-sub-menu>

            <el-sub-menu v-if="undialogVisible" index="3">
              <template #title>
                <el-icon><UserFilled /></el-icon>店铺信息
              </template>
              <el-menu-item index="/shopDetail">店铺信息</el-menu-item>
              <el-menu-item index="/shopInfo">店铺基础信息维护</el-menu-item>
            </el-sub-menu>
           
            <el-sub-menu v-if="undialogVisible" index="4">
              <template #title>
                <el-icon><Comment /></el-icon>评论信息
              </template>
              <el-menu-item index="/shopComment">订单评论信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu v-if="undialogVisible" index="5">
              <template #title>
                <el-icon><Histogram /></el-icon>信息统计
              </template>
              <el-menu-item index="/shopReport">销售统计</el-menu-item>
            </el-sub-menu>
            <el-sub-menu v-if="undialogVisible" index="6">
              <template #title>
                <el-icon><Edit /></el-icon>公告
              </template>
              <el-menu-item index="/shopNotice">公告发布</el-menu-item>
              <el-menu-item index="/shopNoticeLook">公告查询</el-menu-item>
            </el-sub-menu>
            <el-sub-menu v-if="undialogVisible" index="7">
              <template #title>
                <el-icon><Edit /></el-icon>商品管理
              </template>
              <el-menu-item index="/shopCommodity">商品查看</el-menu-item>
              <el-menu-item index="/shopReceiptOfGoods">待签收商品</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu v-if="shopInfo.shopState==3" index="8">
              <template #title>
                <el-icon><UserFilled /></el-icon>商家审核状态
              </template>
              <el-menu-item index="/shopTest">资质审核状态</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header class="header">
          <div class="toolbar">
            <img :src="avatarImage()" alt="Avatar" class="avatar" />
            <span class="username">{{ shopInfo.shopName ? `${shopInfo.shopName} 老板，您好！` : '欢迎，您好！' }}</span>

            <el-dropdown>
              <el-button type="primary" circle>
                <el-icon>
                  <setting />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handlePasswordChange">修改密码</el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <el-dialog title="修改密码" v-model="dialogVisible">
          <el-form :model="passwordForm" ref="passwordForm" label-width="100px">
            <el-form-item label="旧密码" prop="oldPass" :rules="[{ required: true, message: '请输入旧密码', trigger: 'blur' }]">
              <el-input v-model="passwordForm.oldPass" type="password" placeholder="请输入旧密码"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="newPass" :rules="newPassRules">
              <el-input v-model="passwordForm.newPass" type="password" placeholder="请输入新密码"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword" :rules="[{ required: true, message: '请确认新密码', trigger: 'blur' }]">
              <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请确认新密码"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitPassword">提交</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <el-main>
          <el-scrollbar>
            <router-view />
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopInfo: {},
	    undialogVisible: false,
      dialogVisible: false, // 控制弹窗的可见性
      passwordForm: {
        oldPass: '', // 旧密码
        newPass: '', // 新密码
        confirmPassword: '' // 确认新密码
      },
      newPassRules: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        {
          validator: this.validatenewPass,
          trigger: 'blur'
        }
      ],
    };
  },
  methods: {
    avatarImage() {
      return this.shopInfo.shopImage || 'https://daiyuanping888.oss-cn-chengdu.aliyuncs.com/ddf7a29d-eac9-4b2b-a3d2-595fc64246af.jpg'; // 默认图像路径
    },
    handlePasswordChange() {
      this.dialogVisible = true;

      // 确保在 DOM 更新后调用 resetForm
      this.$nextTick(() => {
        this.resetForm(); // 重置表单
      });
    },
    resetForm() {
      this.passwordForm = {
        oldPass: '',
        newPass: '',
        confirmPassword: ''
      };
      if (this.$refs.passwordForm) {
        this.$refs.passwordForm.resetFields();
      }
    },
    validatenewPass(rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入新密码'));
      }
      const isValid = /^[a-zA-Z].{0,9}$/.test(value); // 以字母开头，长度不超过10
      if (!isValid) {
        callback(new Error('密码必须以字母开头，且长度不超过10个字符'));
      } else {
        callback(); // 验证成功
      }
    },
    submitPassword() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          if (this.passwordForm.newPass !== this.passwordForm.confirmPassword) {
            this.$message.error('新密码与确认密码不匹配');
            return;
          }
          // 处理密码修改逻辑
          this.$http.put("/market/shopInfo/updatePassword", this.passwordForm).then(resp => {
            this.$message.success(resp.data.message);
            this.dialogVisible = false; // 关闭弹窗
          }).catch(err => {
            this.$message.error('密码修改失败');
          });
        }
      });
    },

    findShopInfo() {
      this.$http.post("/market/shopInfo/getShopInfo").then(res => {
        this.shopInfo = res.data.data;
		 if(this.shopInfo.shopState===3){
		          this.undialogVisible=false
		        }else{
		          this.undialogVisible=true
		        }
      }).catch(error => {
        console.error('获取商店信息失败：', error);
        // 这里可以显示一个用户友好的消息
      });
    },
    handleLogout() {
      console.log('退出登录');
    },
  },
  created() {
    this.findShopInfo();
  },
};
</script>

<style scoped>
.layout-container-demo {
  border: 1px solid #eaeaea;
  height: 100vh;
  display: flex;
}

.sidebar {
  background-color: #ffffff;
  border-right: 1px solid #eaeaea;
}

.work-center-title {
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background-color: #f5f7fa; /* 背景颜色 */
  border-bottom: 1px solid #eaeaea; /* 底部边框 */
}

.custom-menu {
  background-color: #f5f7fa;
}

.el-menu-item,
.el-sub-menu__title {
  font-size: 14px;
  color: #333;
}

.el-menu-item:hover {
  background-color: #e6f7ff;
  color: #007bff;
}

.el-sub-menu__title:hover {
  background-color: #e6f7ff;
}

.header {
  text-align: right;
  background-color: #007bff;
  color: #fff;
  padding: 10px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  margin-right: 10px;
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .layout-container-demo {
    flex-direction: column;
  }

  .header {
    text-align: left;
  }
}
</style>